<script setup lang="ts">
import { computed } from "vue";
import ContentBox from "@/pages/index/components/ContentBox.vue";
import ByIcon from "@/components/ui/ByIcon.vue";

const { status } = defineProps<{
  status?: keyof typeof config;

  title?: string;
  desc?: string;

  tip?: string;

}>();

const config = {
  0: {
    en: "THANKS",
    size: undefined,
  },

  1: {
    en: "CONGRATS",
    size: 110,
  },

  2: {
    en: "SORRY",
    size: undefined,
  },
};

const view = computed(() => config[status || 0]);
</script>

<template>
  <view class="relative mt-8 mx-1 px-4 z-10">
    <ContentBox :showBgImg="status == 1">
      <view class="flex-center pb-8">
        <ByIcon v-if="status == 1"
                name="Success" :size="86" class="mr-3 text-primary" />

        <view :class="['text-xl text-primary', status == 1 ? 'text-left' : 'text-center']">
          <view class="mb-1.5"> {{ title }}</view>
          <view>{{ desc }}</view>
          <view class="mt-3 text-sm" v-if="tip">原因：{{ tip }}</view>
        </view>
      </view>

      <view class="relative py-3 border-t-1 border-t-black/40 text-center mx-2">
        <text class="text-[140px] text-light font-bold"
              :style="{ fontSize: `${view.size || 146}rpx` }">{{ view.en }}
        </text>
      </view>
    </ContentBox>
  </view>
</template>
